<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: #bfa;
            background-image: url("/exercise/练习的截图/1.png");
            background-repeat: no-repeat;
            background-position: 0px -200px;
            padding: 10px;

            /* 
                设置背景的范围
                    :background-clip:
                        可选值: 
                            border-box 默认值,背景会出现在边框的下边
                            padding-box 背景不会出现在边框,只出现在内容区和内边距
                            content-box 背景只会出现在内容区
                    :background-origin:
                            padding-box 默认值, :background-position从内边距处开始计算
                            content-box 背景图片的偏移量从内容区计算
                            border-box 背景图片的变量从边框处计算
            */
            /* background-origin: border-box; */
            /* background-clip: content-box; */

            /* 
                :background-size 设置背景图片的大小
                    第一个值表示宽度
                    第二个值表示高度
                    -如果只写一个,则第二个值默认是 auto

                    cover 图片的比例不变,将元素铺满
                    contain 图片的比例变,将图片在元素中完整显示
            */
            background-size: contain;
            /* 
            :background-color: ;
            :background-size: ;
            :background-clip: ;
            :background-origin: ;
            :background-position: ;
            :background-repeat: ;
            :background-image: ;
            :background-attachment: ;

                -background 背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置
                    并且该样式没有顺序要求,也没有哪个属性是必须写的

                    注意: 
                        background-size必须写在background-position的后边,并且使用/隔开
                            background-position/background-size

                        background-origin background-clip 两个样式 , orgin要在clip的前边
                        
             */
        }
        .box2{
            width: 300px;
            height: 1000px;
            background-image: url("/exercise/练习的截图/4.png");
            background-repeat: no-repeat;
            background-position: 100px 100px;
            /* 
            :background-attachment:  ;
                -背景图片是否跟随元素移动
                -可选值: 
                    scroll 默认值 背景图片会跟随元素移动
                    fixed 背景会固定在页面中,不会随着元素移动
            */
            background-attachment: fixed;
        }
        .box3{
            width: 500px;
            height: 500px;
            background: #bfa center center no-repeat url("fontawesome-free-6.0.0-beta2-web/css/all.css");
        }
    </style>
</head>
<body>
    <div class="box3">

    </div>
    <div class="box1">
        <div class="box2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium illo, sapiente accusamus, obcaecati iure nemo id necessitatibus alias, minima quaerat debitis tempore voluptatem dolorem harum. Voluptatem earum quam voluptates numquam.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus mollitia enim rem debitis tenetur nobis dolores et! Veritatis quod deleniti labore necessitatibus voluptatum doloribus itaque, non ad omnis accusamus quas.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus error quaerat quas repellat illo quos cum minima fuga ea, consequuntur iure distinctio nihil totam corporis, similique consequatur ipsum molestiae adipisci.
        </div>
    </div>
</body>
</html>